<template>
	<view style="background-color: #151515; padding:0;  min-height: 100vh;">
		<view>  
			<view class="search">
				<input
					    placeholder="搜索香号/配方名"
					    @input="searchKeyword"
						v-model="keyword"
						border="surround"
						class="input"
						style="background-color: rgb(48, 48, 48); "
						@focus="showSearch"
						placeholder-class="input-placeholder"
					/> 
				<view class="icon">
					<u--icon name="search" size="30"></u--icon>
				</view>
				<view class="result" v-if="isSearch">
					<scroll-view scroll-y="true" @scrolltolower="loadSearchMore" class="container"> 
						<view class="item" v-for="(item,index) in searchData" @click="setSearchResult(item)">
							<view class="code">{{item.hash}}</view>
							<view class="name">{{item.name}}</view>
						</view>
						<u-empty text="未搜索到结果" v-if="searchData.length == 0" textColor="#FFF"></u-empty>
					</scroll-view>
					
				</view>
			</view>
			
		</view>
		
		
	 	<view class="top-swiper" @click.stop="isSearch=false">  
			 <view class="box" > 
				<!-- <label style="color: #fff;">ddd{{ data?.length }}</label> -->
				 <!-- @change="onSwiperChange" -->
				<swiper :current="current"   
					:indicator-dots="false"  
					ref="mySwiper"  
					indicator   
					:acceleration='true'   
					indicatorMode="line"  
					@change="setCurSwiper" 
					:duration="swiperSpeed" 
					class="swiper" 
					:previous-margin="swiper.margin" 
					:next-margin='swiper.margin' 
					:circular="true" 
					@touchstart="touchStart"
					@touchend="touchEnd" 
					@animationfinish="swiperChange"> 
			 		<swiper-item catchtouchmove v-for="(item,index) in data" :key="index" :class="'itemSwpier ' +(swiper.index == index?'itemSwpierCur':'')" >			 			
							<view class='le-img'  :class="{'le-active':swiper.index == index}"
								:style="{ 'background':'url('+imgHost+'/statics/assets/dialogBg.png) no-repeat top center','background-size':'100% 100%'}"
							>	
								<!--  -->
								<!-- 删除弹窗确认框 -->
								<view class="rgClose" @click.stop="delBlock(item.id)">
									<!-- <image :src="+ imgHost + '/statics/assets/iconClose.png'" style="width: 47rpx; height: 47rpx;" ></image> -->
									<image src="@/assets/iconClose.png" style="width: 47rpx; height: 47rpx;" ></image> 
								</view>
							
								
								<!-- 需要整理逻辑 -->
								<view class="saveHasMaske" v-if="item.is_save == 1">已定制 永久保存</view>
								<view class="saveHasMaske saveNoMaske"  v-if="item.is_save == 0" >未定制 3天后自动删除</view> 
								
								<view class="name" >
									<view class="editName" style="margin: 0 auto;" @click.stop="editContent(item,'name')">{{form.name}}</view>
									<u--icon name="reload" @click="reloadGPT(id,'name')" v-if="nameLoaded" size="16"></u--icon> 
								 </view>
								
								<view class="codeBox">
									<view class="code" @click="copyText(item.code)">唯一香号：{{item.hash}} </view> 
									<!-- 逻辑整 -->
									<u--icon name="reload" class="reload" @click="reloadGPT(id,'code')" size="16" style="padding-left:5rpx" v-if="action == 'my'"></u--icon> 
								</view> 
								
								<view style="height: 40rpx;">
									<view class="dotTop"></view> 
								</view>
								<scroll-view scroll-y="true"  class="scroll-intro" :scroll-top="introScrollTop" v-if="id == item.id"><view  id="scroll_intro" class="intro" v-html="item.intro" @click.stop="editContent(item)"></view></scroll-view> 
								<scroll-view scroll-y="true" class="intro" v-if="id != item.id" v-html="item.intro" @click.stop="editContent(item,'intro')">
									
								</scroll-view>
								<view>
									<view class="nickname">
										<view class="left">
											 <u-icon v-if="action == 'confirm' && id == item.id" @click="reloadGPT(id,'desc')" name="reload" style="margin-top:30rpx"></u-icon>
										</view>
										<view class="right">
											<text style="font-size: 22rpx;">
												调香师：
											</text>
											<input placeholder="请填写调香师" :readonly="true" @click="editContent(item,'truename')" v-model="form.truename" :style="{width:'200rpx','font-size':'22rpx'}" />
										</view>
									</view>
								</view>
								
								<view class="bottom" :style="{'margin-top':'50rpx'}">
									<view class="left">
										<view class="line"></view>
									</view>
									<view class="right" style="font-weight: bold;">Al调香实验室</view>
								</view>
							</view>
			 		</swiper-item>
			 	</swiper> 
				
				<swiper 
				  v-if="master_id == 0&&!isSearchResult" 
				  class="indicator-swiper scroll-view"
				  :indicator-dots="false"				 
				  :current="current"
				  :acceleration='true'
				  @change="handleIndicatorChange"
				  circular
				  :autoplay="false" 
				  :duration="300" 
				  :scroll-with-animation="true"
				  :effect3d='true' 
				  @touchstart="touchStart"
				  @touchend="touchEnd" 
				  
				>
				<!-- v-for="(item,index) in data" -->
				  <swiper-item v-for="(group, index) in total"  :key="index"  style="width: 4.75%; height: 50rpx;" class="dotSwiper">
					 <view class="indicator-dot" :class="current==index || index==0?'active':''" v-if="current==index|| index==0"  @click="current=index" ></view>
					  <view class="indicator-dot active2" v-else-if="current==(index-1)|| index==1"  @click="current==(index-1)" ></view> 				  
					  <view class="indicator-dot active3" v-else-if="current==(index-2)|| index==2"  @click="current=index" ></view>
					  <view class="indicator-dot active4" v-else-if="current==(index-3)|| index==3"  @click="current=index" ></view>
					  <view class="indicator-dot active5" v-else-if="current==(index-4)|| index==4" @click="current=index" ></view>
					  <view class="indicator-dot active6"  v-else-if="current==(index-5)|| index==5" @click="current=index" ></view>
					  <view class="indicator-dot active7"  v-else-if="current==(index-6)|| index==6"  @click="current=index" ></view>   
					 <view class="indicator-dot active8"  v-else-if="current==(index-7)|| index==7" @click="current=index" ></view>
					  <view class="indicator-dot active9"  v-else-if="current==(index-8)|| index==8" @click="current=index" ></view>
					  <view class="indicator-dot active10"  v-else-if="current==(index-9)|| index==9"  @click="current=index" ></view>
					  <view class="indicator-dot active11"  v-else-if="current==(index-10)|| index==10" @click="current=index" ></view>
					  <view class="indicator-dot active10"  v-else-if="current==(index-11)|| index==11" @click="current=index" ></view>
					  <view class="indicator-dot active9"  v-else-if="current==(index-12)|| index==12" @click="current=index" ></view>
					  <view class="indicator-dot active8"  v-else-if="current==(index-13)|| index==13" @click="current=index" ></view>
					  <view class="indicator-dot active7"   v-else-if="current==(index-14)|| index==14" @click="current=index" ></view>
					  <view class="indicator-dot active6"   v-else-if="current==(index-15)|| index==15" @click="current=index" ></view>
					  <view class="indicator-dot active5"   v-else-if="current==(index-16)|| index==16" @click="current=index" ></view>
					  <view class="indicator-dot active4"   v-else-if="current==(index-17)|| index==17" @click="current=index" ></view>
					  <view class="indicator-dot active3"   v-else-if="current==(index-18)|| index==18" @click="current=index" ></view>
					  <view class="indicator-dot active2"   v-else-if="current==(index-19)|| index==19" @click="current=index" ></view>
					  <view class="indicator-dot active1"   v-else-if="current==(index-20)|| index==20"  @click="current=index" ></view>
					  <view class="indicator-dot active"   v-else-if="current==(index-21)|| index==21"  @click="current=index" ></view>
				  </swiper-item>
				</swiper>  
				 
			 </view>  
			  
			
				<view class="pg_bottom">
					<view v-if="isSearchResult" class="search_back" @click.stop="showSearchResult">
						<view class="btns" style="margin-top: 20px;">
							返回原始配方
						</view>
					</view>
					<view class="checkbox">
						 <view class="l">
						 	<up-checkbox-group
						 	    iconPlacement="left" 
						 	    placement="row">
						 		<up-checkbox
						 				size="14"
						 				label=""
						 				name="isOfficial"
						 				:checked = "isOfficial "
						 				inactiveColor="#888"
						 				activeColor="#000"
						 				shape="circle" 
						 				@change="setOfficial"
						 				
						 			>
						 		</up-checkbox>
						 	</up-checkbox-group>
						 </view>
						 <view class="r" @click="setOfficial(!isOfficial)">
						 	同意共享该配方至官方公开配方库
							<!-- 我的 -->
						 </view>
					</view>
					<view class="checkbox" style="margin-top: 10rpx;" >
						 <view class="l">
						 	<up-checkbox-group
						 	    iconPlacement="left" 
						 	    placement="row">
						 		<up-checkbox
										size="14"
						 				label=""
						 				name="agree"
						 				:checked = "isLock "
						 				inactiveColor="#888"
						 				activeColor="#000"
						 				@change="setLock"
										shape="circle" 
						 			>
						 		</up-checkbox>
						 	</up-checkbox-group>
						 </view>
						 <view class="r" @click="setLock(!isLock)">
						 	直接 <text style="color:#b1b36a; opacity: 1;">锁定订单</text>（<text>优先安排</text>，无法更改）
						 </view>
					</view>
					
					<!-- 需要处理 -->
					<!-- <view class="btn " @click="saveWay"  v-if="action == 'official'" >
						<text class="sure">保存配方</text>
						<text class="tips">当前可保存配方数:1</text> 
					</view> -->
					<!-- 需要处理 -->
					<view class="fixedBottomBox">
						
					
					<view class="flex "  v-if="action == 'confirm'">
						<view class="btn btn1" style="width: 50%;" >
							<text class="sure" @click="clickBackindex">返回主页</text> 
						</view>
						<view class="btn btn1" style="width: 50%;">
							<text class="sure" @click="clickSaveResult">保存结果：{{form.name}}</text> 
						</view>
					</view>
					
					
					<!-- 分享 --> 
					<view class="btn  btn1"   @click="createPoster(this.form.id)" style="margin-bottom: 20px;">
						<text class="sure" >生成调香海报分享给朋友</text>
					</view>
					
				<!-- 	<view class=" btn  flex " @click="submit" >
						<view class="sure"  style="padding: 20rpx 0;">确认定制：{{form.name}}</view>
						<view class="tips">(未锁定,可在15分钟内在“已制作”中重新调配)</view>
					</view> -->
					
					<view class="btn btn1" @click="submit" >
						<text class="sure">确认定制：{{form.name}}</text> 
					</view>
					
					
					<view class=" btBottom " @click="goto('myindex/myindex')"  v-if="hash.status == 1">
						<text class="sure">返回首页</text>
					</view>
					
					
					</view>
				</view>
			 <view style="height: 10rpx;"></view>
		</view> 
		
		<u-popup :show="success" mode="center"   bgColor="transparent">
			<view class="dialogBox "> 
				<view class="dialogBoxCon" :style="{ 'background':'url('+imgHost+'/statics/assets/dialogBg.png) no-repeat top center','background-size':'100% 100%'}"> 
					<view class="close">
						<image :src="imgHost +'/statics/assets/iconClose.png'" @click.stop="success=false" class="btnClose"></image>
					</view>
					<view>
						<image :src="imgHost + '/statics/assets/logoh.png'" class="logoh"></image>
					</view>   
				
					<view class="til_code">{{confirmResult.hash}}</view>
					<view class="info1">
						订单编号：{{confirmResult.order_id}}<br/>
						AI调香师：{{confirmResult.truename}}<br/>
						香氛名称：{{confirmResult.name}}<br/>
						定制日期：{{confirmResult.date}}
					</view> 
					
					<view class="info2">
						<h2>您的订单已经提交成功！</h2> 
						<view style="padding: 10rpx 0 50rpx 0;">订单自动绑定配方香号，通常会在次日发货，最晚不超过48小时</view>
						<view>若您未锁定订单，可15分钟内在主页中“已制作”中选择“重新调制” 若“已制作”中显示“已确认”，则代表该订单已打印无法更改</view> 
					</view> 
					
					<view class="haxi3" 
					   @click="goto('myindex/myindex')"   :style="{ 'background':'url('+imgHost+'/statics/assets/dialog_bt.png) no-repeat top center','background-size':'100% 100%'}">  
						完成并返回主页
					</view>  
				</view>
				
			</view>
		</u-popup>
		
		<u-modal :show="editNameShow" v-if="editNameShow" width='320px'  :showConfirmButton='true' :showCancelButton='true' @confirm='confirmEditName' @cancel='editNameShow=false'>
			<view style="margin-top: 10rpx;">  
				<u-input
					placeholder="请填写香氛名"
					border="surround"
					:customStyle="{'padding':'6px 10px', 'width':'300px', 'border':'1px solid #ddd'}"
					:value="editNameTxt" 
					@change="changeName"
				  ></u-input> 
			</view>
		</u-modal>  
		<!-- editName -->
		<!-- 修改名字 -->	
			
		<!-- 修改内容 -->
		<u-modal :show="editNameShow1" v-if="editNameShow1" width='320px'  :showConfirmButton='true' :showCancelButton='true' @confirm='confirmContent' @cancel='editNameShow1=false'>
			<view style="margin-top: 10rpx;">  
				<textarea
					:placeholder="editContentPlaceHolder" 
					style="border: 1px solid #eee; width: 300px; padding: 6px; margin: 0 20rpx;"
					v-model="editTxtContent" 
					
				  ></textarea>  
			</view>
		</u-modal> 
		 <!-- 修改内容  end-->
		
		<u-popup :show="successWay" mode="center"   bgColor="transparent">
			<view class="dialogBox shareBox"  >
				<view class="headerTop">
					<!-- <view class="saveHasMaske" >长按保存配方海报分享给朋友吧</view> -->
					<view class="close"  @click.stop="successWay=false">
						<image :src="imgHost + '/statics/assets/iconClose.png'" class="btnClose"></image>
					</view>
				</view> 

				<view   v-if="posterImage" style="width: 100%; text-align: center; background-color: #fff;"> 
					<image :src="posterImage" :style="{width:'720rpx',height: '972rpx',margin:'0 auto'}"></image>
				</view>
				<view class="poster-canvas" v-else>
					<canvas  canvas-id="canvas" id="canvas"  :style="{width:'720rpx',height: '972rpx',margin:'0 auto'}"></canvas>
				</view>
			 
				<view class="shareBtn"  @click="savePic">
					<text class="sure" style="padding: 20rpx 0;">保存到手机</text>
				</view> 
			</view> 
		</u-popup>
		
		
		
		<u-modal :show="backIndexShow" v-if="backIndexShow" width='320px'  :showConfirmButton='true' :showCancelButton='true' @confirm='backIndexShow=false' @cancel='backIndexShow=false'>
			<view style="margin-top: 10rpx;"> 
				直接返回主页配方将不会保存。
			</view>
		</u-modal> 
		
		<!-- 保存结果  --> 
		<u-popup :show="saveResultShow" mode="center" class="savePop" @close="saveResultShow=false" >
			<view class="content" :style="{ 'background':'url('+imgHost+'/statics/assets/dialoBg.png) no-repeat top center','background-size':'100% 100%'}" 
			>
				<view class="content1">未定制配方最多保存3个，3天后将被自动清空，确定定制的配方将永久保存。</view> 
				<view class="flex bottomPop" >
					<view class="btn" @click="saveResultShow=false">取消</view>
					<view class="btn" @click="save()">继续保存</view>
					<view class="btn btn3" @click="submit()">定制该配方</view>
				</view>
			</view>
		</u-popup> 
		
		<!-- 分享弹出 -->
		<shareImg v-if="shareShow" @closeShare = "shareShow=false" />
		 
	</view>
</template>
  
<script>  
import store from "@/store";
import cfg from '@/config/app';
import Cache from '@/utils/cache';
import cardSwiper from "@/components/helang-cardSwiper/helang-cardSwiper"
import shareImg from './shareImg.vue' 
import { 
	manage,
	getHash,
	save,
	confirm,
	del,
	search,
	edit
} from '@/api/hash';
import wxH5 from "weixin-js-sdk";
import html2canvas from 'html2canvas';
import FakeProgress from 'fake-progress'
	export default {
		data() {
			return {
				imgHost : '',
				canvasMultiple: 2,
				posterImage:'',
				confirmResult : {},
				fake: new FakeProgress({
							timeConstant: 5000,  //timeConstant相当于分母，分母越大则加的越少
							autoStart: true //自动开始
						}),
				startSwiper:false,
				swiperSpeed:100,
				processBarInterval : null,
				isRightAllData:false,
				isLeftAllData:false,
				isSliderBtn:false,
				swiperPosition : '',
				swiperRunning : false,
				isSearch : false,
				keyword : '',
				canEdit:false,
				searchData:[],
				isSearchResult:0,
				searchPage : 1,
				staffLoaded:false,
				isGettingName : false,
				isGettingIntro : false,
				introScrollTop:0,
				scrollHeight:0,
				scrollToView:'test',
				id : 0,
				type : 1,
				myHash : [],
				isDeep : false,
				isSwiper : false,
				isRunning:false,
				current:0,
				slider:50,
				limit : 21,
				isLock:false,
				isOfficial : true,
				currentSlider:0,
				page : 1,
				interval : null,
				data : [],
				hash: {
					'name' : '',
					'intro' : '',
					'staff' : '',
				},
				swiper: {
					margin: "100rpx",
					index: 0,
					
				},
				form : {
					name : '',
					intro : '',
					id : '',
					code : '',
					truename : ''
				},
				error : 0,
				isSubmit : 0,
				isConfirm:0,
				success:false,
				statusText:'',
				countTime : 60,
				placeholder:{
					name : ''
				},
				last_page:1,//总页码
				total:0,
				touchStartX: 0,
				touchStartY: 0,
				touchStartTime: 0,
				leftForceX:0,
				rightForceX:0,
				editNameShow:false,
				editNameShow1:false,
				
				editTxtContent:'',
				
				
				curItem:"",
				editNameTxt:'',
				successWay:false,
				saveResultShow:false,
				backIndexShow:false,
				editContentPlaceHolder : '请填写介绍',
				shareShow:false
			}
		},
		components:{
			cardSwiper,shareImg
		},
		watch:{
			slider(newValue,oldValue){
				if ( newValue != oldValue ){					
					this.runSwiper(newValue);
				}
				
			},
			page(newValue,oldValue){ 
				if(newValue<=this.last_page){
					this.getMyHash();
				}
			}
			
		},
		
		computed: {  
		  
		}, 
		
		onLoad(option){
			//option.token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJwd2QiOiJkNDFkOGNkOThmMDBiMjA0ZTk4MDA5OThlY2Y4NDI3ZSIsImlzcyI6InR4LnhtYi5qbC5jbiIsImF1ZCI6InR4LnhtYi5qbC5jbiIsImlhdCI6MTczNzQyODc0MiwibmJmIjoxNzM3NDI4NzQyLCJleHAiOjE3NDAwMjA3NDIsImp0aSI6eyJpZCI6MywidHlwZSI6ImFwaSJ9fQ.DE471wivYJ0eQ94VL51UfJCecSytjXXq9E6l6RBnF9w';
			this.imgHost = cfg.HTTP_REQUEST_URL;
			store.commit('LOGIN',{'token':'Bearer '+option.token});;
			this.init();
			// this.creatCanvas();
		},
		
		methods:{ 	   
			clickBackindex(){
				this.backIndexShow = true
			},
			clickSaveResult(){
				this.saveResultShow = true
			}, 
			
			touchStart(e) {
			 if(this.data?.length==1) return false 
			  this.touchStartX = e.touches?.[0].clientX;
			  this.touchStartY = e.touches?.[0].clientY;
			  this.touchStartTime = e.timeStamp;
			},
			touchEnd(e) {
				if(this.data?.length==1) return false 
			  let endX = e.changedTouches?.[0].clientX;
			  let endY = e.changedTouches?.[0].clientY;
			  let endTime = e.timeStamp;
					
			  let deltaX = endX - this.touchStartX;
			  let deltaY = endY - this.touchStartY;
			  let duration = (endTime - this.touchStartTime) / 1000; // 转换为秒
					
			  // 计算滑动力度（这里简单使用距离除以时间）
			  let forceX = Math.abs(deltaX) / duration;
			  let forceY = Math.abs(deltaY) / duration; 
			  // 判断滑动方向
			  if (Math.abs(deltaX) > Math.abs(deltaY)) {
				if (deltaX > 0) {
				  console.log("右滑，力度：", forceX);
				  this.rightForceX = forceX;
				  if(this.rightForceX>1500){
					  this.current = this.current-2
				  }
				  
				} else {
				  console.log("左滑，力度：", forceX);
				  this.leftForceX = forceX
				  if(this.leftForceX>1500){
				  	 this.current = this.current+2
				  }
				}
			  }  
			},
			
			handleSwiperChange(event) {
			  this.current = event.detail.current; 
			  this.updateIndicatorIndex();
			},
			handleIndicatorChange(event) {
			  this.indicatorCurrentIndex = event.detail.current;
			  this.current = event.detail.current;
			  console.log(event);
			  // this.current = this.indicatorCurrentIndex * (this.visibleDotRange * 2 + 1);
			},
			updateIndicatorIndex() {
			  this.indicatorCurrentIndex = Math.floor(this.current / (this.visibleDotRange * 2 + 1));
			},  
			showSearchResult(){
				this.page=1
				this.getData();
				this.isSearchResult=false;
			},
			initScrollHeight() {
				uni.createSelectorQuery()
				.in(this)
				.select('#scroll_intro')
				.boundingClientRect(data => {
					if (data) {
						this.introScrollTop = data.height 
					}
				})
				.exec();
			},
			setLock(e){
				this.isLock = e;
			},
			setOfficial(e){
				this.isOfficial = e
			},
			stopSwiper(){
				this.isSwiper = false;
				clearInterval(this.interval);
			},
			createProcessBar(durning){
				
				this.fake.progress = 0 //每次先归零
				this.fake.start()
				console.log('a',this.fake.progress )
				
			},
			getData(){
				
				this.getMyHash();
				
			},
			getMyHash(){
				if(this.page==1){
					this.data = [];
					uni.showLoading({
						title:'加载中'
					});
				}
				
				manage({"page":this.page,'limit':this.limit,'myself':1,'master_id':this.master_id,'only':1}).then(res =>{
					
					if (this.startSwiper){
						if ( res.data.data.length == 0 ){
							this.swiperPosition = '';
							this.isRightAllData = true;
							uni.$u.toast("所有配方加载完毕");
							return false;
						}
					} 
					this.last_page = res.data.last_page;
					this.total = res.data.total;
					if(this.total<21){
						this.data = [...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data,...res.data.data]; 
						this.total = this.data?.length;
					}else{
						this.data = [...this.data,...res.data.data]; 
					}
					
					// this.data =res.data
					if(this.page==1 && this.data.length> 0){
						this.form.name = res.data.data[0].name;
						this.form.intro = res.data.data[0].intro;
						this.form.truename = res.data.data[0].truename;
						this.form.hash = res.data.data[0].hash;
						this.form.id = res.data.data[0].id;
						
					}
					if(this.page<res.data.last_page){
						this.page++
					} 
					
					if ( this.action != 'confirm' ){
						this.nameLoaded = true;
						this.descLoaded = true;
						this.staffLoaded = true;
					}
					
					
					this.initScrollHeight();
					 if ( this.data.length == 0 ){
						 clearInterval(this.interval);
					 }
					 uni.hideLoading()
				}).catch(e =>{
					console.log(e);
					  uni.showToast({
						title:e
					  })
				})
			},
			setSearchResult(item){  
				this.isSearch = false;
				this.isSearchResult = 1;
				this.data = [{...item}];
				// this.data.push();
				this.form.name = item.name;
				this.form.id = item.id;
				this.current = 0
			},
			showSearch(e){
				this.searchKeyword(e);
				this.isSearch = true;
			},
			searchKeyword(e){
				this.searchPage = 1;
				this.searchData = [];
				this.keyword = e.detail.value;
				this.isSearch = false;
				
				this.isSearch = true;
				this.getSearchResult();
				
			},
			getSearchResult(){
				search({page:this.searchPage,"keyword":this.keyword,'myself':this.showMyself ? 1 : 0,'only':this.action == 'official' ? 1 : 0}).then(res =>{
					res.data = res.data.data;
					console.log(res.data);
					for(var i in res.data){
						this.searchData.push(res.data[i]);
					}
					
				}).catch(e =>{
					
				})
			},
			loadSearchMore(){
				this.searchPage ++;
				this.getSearchResult(this.keyword);
			},
			setSlider(e){ 
				let value = e.detail.value;
				this.slider = value;
				this.isSliderBtn = true;
				this.swiperPosition = value < 50 ? 'left' : 'right';
				let v = 0;
				if ( this.swiperPosition  == 'left' ){
					v =  (100 - (50 +  value));
					
				}else{
					v =  value - 50;
					
				}
				this.swiperSpeed = 1000 - (v*15);
				console.log('aa',this.swiperSpeed);
				/*
				this.runSwiper(value);*/ 
			},
			setItemName(e){
				this.editNameStr = e;
			},
			editName(item){  
				this.editNameShow=true;
				this.curItem = item;
				this.editNameTxt = item.name; 
			},
			changeName(e){
				this.editNameTxt = e; 
			},
			confirmEditName(){ 
				if ( this.editNameTxt == '' ) return false;
				modifyName({'id':this.curItem?.id,'name':this.editNameTxt}).then(res =>{
					uni.$u.toast(res.msg);
					this.editNameShow=false
				}).catch(e =>{
					uni.$u.toast(e.msg);
				})
			},
			
			//编辑内容 
			setItemContent(e){
				this.editNameStr = e;
			},
			editContent(item,type){  
				this.editTxtContent = '';
				if ( type == 'intro' ){
					this.editContentPlaceHolder = '请填写新的香氛介绍';
				}else if( type == 'name' ){
					this.editContentPlaceHolder = '请填写新的香氛名称';
				}else if( type == 'truename' ){
					this.editContentPlaceHolder = '请填写新的调香师';
				}
				item.type = type;
				this.editNameShow1=true;
				this.curItem = item;
				console.log(this.curItem);
				// this.editNameContent = item.name; 
			},
			changeContent(e){
				this.editNameContent = e; 
			},
			confirmContent(){ 
				if ( this.editTxtContent == '' ) return false;
				edit({'id':this.curItem?.id,'content':this.editTxtContent,'field':this.curItem.type}).then(res =>{
					this.form[this.curItem.type] = this.editTxtContent;
					this.editNameShow1 = false;
					uni.$u.toast(res.msg);
					this.editNameShow=false
				}).catch(e =>{
					uni.$u.toast(e.msg);
				})
			},
			
			 
			resetSlider(){
				this.slider = this.slider ==  50.1 ? 50 : 50.1;
				this.swiperRunning = false;
				this.startSwiper = false;
				this.isSliderBtn = false;
				
			},
			runSwiper(value){
				this.startSwiper = true;
				if ( this.swiperPosition == 'right' && this.slider > 51){
					if ( this.isRightAllData ){
						uni.$u.toast("所有配方加载完毕");
						return false;
					}
					if ( !this.swiperRunning && !this.isRightAllData ){
						this.swiperRunning = true;
						if ( this.current >= 9 ){
							this.current =0
							
						}else{
							this.current ++;
						}
						console.log('cur',this.current);
						
					}
				}
				if ( this.swiperPosition == 'left' && this.slider < 50 ){
					if ( this.isLeftAllData ){
						uni.$u.toast("所有配方加载完毕");
						return false;
					}
					this.startSwiper = false;
					console.log(this.startSwiper);
					if ( !this.swiperRunning ){
						this.swiperRunning = true;
						console.log(this.current);
						if ( this.current == 0 ){
							this.current =9
						}else{
							this.current --;
						}
						console.log(this.current);
						
					}
				}
				
			},
			runSwiper1(value){
				this.isSwiper = true;
				this.isRunning = true;
				let position = '';
				let speed = 50;
		
				if ( value < 50 ){
					position = 'left';
				}
				if ( value > 50 ){
					position = 'right';
					
				}
				
				if ( this.interval ) clearInterval(this.interval)
				if ( position == 'right' ){
					speed = 50;
					this.swiper.index++;
					this.current ++;
					let v =  value - speed;
					speed =  v +  v * (v/4) ;
				
				}
				if ( position == 'left' ){
					speed = 50;
					if ( this.current > 0 ){
						this.swiper.index--;
						this.current --;
						if ( this.current < 0 ){
							this.current = 9
						}
					}
					let v =  (100 - (speed +  value))
					speed = v + v * (v/4) ;
				
				}
				this.interval = setInterval(() =>{
					if ( position == 'right' ){
						this.swiper.index++;
						this.current ++;
						if ( this.current >= this.limit ){
							this.current = 0;
							this.swiper.index = 0;
							this.page ++;
							console.log('dcccc');
							this.getData();
						}
					}
					if ( position == 'left' ){
						
						if ( this.current == 0 && this.page > 1 ){
							this.current = 9;
							this.swiper.index = 9;
							
							if ( this.page <= 1 ){
								//clearInterval(this.interval);
							}
							this.page --;
							this.getData();
						}else{

							if ( this.page <= 1 && this.current == 0 ){
								//clearInterval(this.interval);
								this.swiper.index = 9;
								this.current = 9;
							}else{
								
								this.swiper.index--;
								this.current --;
							}
						
						}
						
					}
					console.log('dd',this.page);
				},800-speed) ;
				if ( value == 50 ){
					//clearInterval(this.interval);
				}
				console.log('index',this.current);
				
			},
			setCurSwiper(e){ 
				this.current = e.detail.current;
				this.handleSwiperChange(e); 
				this.swiper.index = e.detail.current;
				this.form.name = this.data[this.swiper.index].name;
				this.form.truename = this.data[this.swiper.index].truename;
				this.form.id =  this.data[this.swiper.index].id;
				this.form.code =  this.data[this.swiper.index].code;
				
				if ( !this.isSliderBtn ){
					this.current = e.detail.current;
				}
				
				if ( this.current < e.detail.current ){
					console.log('dd',this.current);
					if ( this.swiper.index >= 9 ){
						this.current = 0;
						this.page ++;
						this.getData();
					}
				}
			},
			//swiper滑动事件
			swiperChange: function(e) {
				this.swiper.index = e.detail.current;
				if ( (this.swiperPosition == 'left' && this.slider < 50)  ){
					if ( this.page <=1 && this.current == 0 ){
						uni.$u.toast("所有配方加载完毕");
						this.current = 0;
						this.isLeftAllData = true;
						return false;
					}
					this.current --;
					console.log('dddd',this.current);
					if ( this.current < 0 ){
						this.current = 9;
						this.page --;
						this.getData();
					}
					
				}
				
				if ( this.swiperPosition == 'right' && this.slider >= 51){
					this.current ++;
					console.log('dddd',this.current);
					if ( this.current >= 9 ){
						this.current = 0;
						this.page ++;
						this.getData();
					}
				}
				
			},
			clickTab(e){
				
			},
			setShowMyself(value){
				
				this.showMyself = value;
				this.getMyHash();
			},
			init(){
				this.page = 1;
				this.getData();
				
			},
			
			delete(id){
				del(id).then(ret =>{
					uni.$u.toast(ret.msg);
					this.init();
					this.saveResultShow = false;
				}).catch(e =>{
					uni.$u.toast(e);
				})
			},
			save(){
				save(this.form.id).then(ret =>{
					uni.$u.toast(ret.msg);
					this.saveResultShow = false;
				}).catch(e =>{
					uni.$u.toast(e);
				})
			},
			createPoster(id){
				this.shareShow = true;
				// wxH5.miniProgram.navigateTo({ 'url':'/pages/tiaoxiang/shareImg?id='+id} );
			},
			doConfirm(){
				confirm({id:this.form.id,is_lock:this.isLock ? 1 : 0,truename:this.form.truename,from : 'manage',is_official:this.isOfficial? 1 : 0}).then(res =>{
					 this.saveResultShow = false;
					  if ( res.data.type == 'create' ){
						   wxH5.miniProgram.navigateTo({ 'url':res.data.url} );
						   return false;
					  }
					 this.confirmResult = res.data;
					 this.success = true;
					 this.isConfirm = 1;
					 this.hash.status = 1;
				}).catch(e =>{
						  console.log(e);
					  uni.showToast({
						icon:'none',
						'title': e.msg
					  })
				})
			},
			doCopy(){
				copyStaff({id:this.form.id,isLock:this.isLock ? 1 : 0,isOfficial:this.isOfficial? 1 : 0}).then(res =>{
						this.form.code = res.data.hash;
						this.success = true;
				  }).catch(e =>{
					  uni.showToast({
						icon:'none',
						'title': e.msg
					  })
				  })
			},
			copyText(text){
				console.log('ddd');
				uni.setClipboardData({
				        data: text,
				        success() {
				          uni.showToast({
				            title: '复制成功',
				            icon: 'success'
				          });
				        }
				      });
			},
			submit(){
				if ( this.isSubmit == 0 && this.isLock == 1 ){
					  uni.showModal({
						content:'锁定订单后，您的香氛将安排生产，但无法15分钟内重新调整配方，是否继续？',
						confirmText:'确定，帮我锁定 ',
						cancelText:'取消，还不确定',
						success: res =>{
							this.isSubmit = 1;
							if ( res.confirm ){
								this.isLock = 1;
								this.doConfirm();
								return false;
							}else{
								this.isLock = 0;
								return false;
							}
										
						}
					  })
					 
				}else{		  			
					this.doConfirm();
				}
			},
			
			setAgreement(n){
				this.isLock = n;
			},
			
			// 删除的方法 ，具体逻辑需处理
			delBlock(id){
				uni.showModal({
					content:'确认是否删除？',
					success: (res) => {
						if ( res.confirm ){ 
							this.delete(id);
						}
					}
				})
			},
			// 保存配方
			saveWay(){
				this.successWay = true;
				this.creatCanvas();
			},
			shareBtn(){
				this.successWay = true;
				this.creatCanvas();
			},
			savePic(){ 
				// #ifdef MP 
					this.savePosterPath()
					// this.saveCanvasToPhone(); 
				// #endif
				
				// #ifdef H5
					this.generateImage();
				// #endif  
			},
			generateImage() { 
				 const element = document.getElementById('shareBox'); // 替换为你的页面元素ID
				 html2canvas(element).then(canvas => {
				   const imgData = canvas.toDataURL('image/png'); // 将Canvas转换为图片数据
				   console.log(imgData,'imgData'); 
				   this.saveImageToLocal(imgData); // 调用保存图片到本地的函数
				 });
			},
			saveImageToLocal(imgData) {
				 const link = document.createElement('a');
				 link.href = imgData;
				 link.download = 'shareImg.png'; // 设置下载图片的名称
				 document.body.appendChild(link);
				 link.click();
				 document.body.removeChild(link);
				 uni.showLoading({
				 	 title:'保存成功！'
				 })
				 
				 uni.hideLoading();
			},
			// #ifdef MP
			savePosterPath: function () {
				let that = this;
				uni.getSetting({
					success(res) {
						if (!res.authSetting['scope.writePhotosAlbum']) {
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success() {
									uni.saveImageToPhotosAlbum({
										filePath: that.posterImage,
										success: function (res) {
											// that.posterImageClose();
											that.$util.Tips({
												title: that.$t(`保存成功`),
												icon: 'success'
											});
										},
										fail: function (res) {
											that.$util.Tips({
												title: that.$t(`保存失败`)
											});
										}
									});
								}
							});
						} else {
							uni.saveImageToPhotosAlbum({
								filePath: that.posterImage,
								success: function (res) {
									// that.posterImageClose();
									that.$util.Tips({
										title: that.$t(`保存成功`),
										icon: 'success'
									});
								},
								fail: function (res) {
									that.$util.Tips({
										title: that.$t(`保存失败`)
									});
								}
							});
						}
					}
				});
			},
			// #endif 
			  
			 
			splitStringIntoChunks(str, chunkSize) {
				return str.match(new RegExp('.{1,' + chunkSize + '}', 'g'));
			}, 
				
			 async creatCanvas() {  
			       // const that = this 
			       // 创建canvas对象 
			       // uni.showLoading({ title: '生成专属海报' }) 
			       this.canvas = uni.createCanvasContext('canvas', this) 
				   console.log(this.canvas,'this.canvas')
			       // 这里是我自己的方法下载图片 
			       // canvas中的插入的图片不能是网络地址只能是下载到本地的 
			       const qrCode = '/static/code.png' //
			       const imgBg = '/static/dialogBgShare.png' 
			       const logoIcon ='/static/logoh.png'  
				   const dialogBt = '/static/dialog_bt.png'
			 
			       const { canvasMultiple, rpxToPx } = this 
			       // 插入背景图 第2 3 4 5参数单位是px的所以我们要做适配 rpx转换为px 可以自定义方法 也可以使用uniapp中的方法  
				   this.canvas.drawImage(imgBg, rpxToPx(0 * canvasMultiple), rpxToPx(0 * canvasMultiple), 360, 486)  
				   // this.canvas.drawImage(imgBg, 0, 0, 300, 405)
			       // 将二维码插入到canvas中 
			       this.canvas.drawImage(qrCode,rpxToPx(240 * canvasMultiple), rpxToPx(200 * canvasMultiple), 80, 80)
			       // 插入logo
				   
				    this.canvas.fillStyle = '#fff'
				    this.canvas.font = `18px 微软雅黑`   
					this.canvas.letterSpacing  = 10
				    this.canvas.fillText('5GDF-555F-FGGG-34FV', rpxToPx(60 * canvasMultiple), rpxToPx(177 * canvasMultiple)) 
				    this.canvas.fillStyle = '#000' 
				    this.canvas.font = `13px 微软雅黑`   
				    this.canvas.fillText('AI调香师：奔跑的斑马', rpxToPx(28 * canvasMultiple), rpxToPx(225 * canvasMultiple))
				    this.canvas.fillText('香氛名称：奔跑的斑马', rpxToPx(28 * canvasMultiple), rpxToPx(245 * canvasMultiple))
				    this.canvas.fillText('定制日期：2024/12/15', rpxToPx(28 * canvasMultiple), rpxToPx(265 * canvasMultiple)) 
					 this.canvas.font = `12px 微软雅黑`    
					let txtxtArr = this.splitStringIntoChunks('香氛介绍：初闻，橙花的香气如同划破夜幕的第一道曙光，清澈而充满希望。随之而来的是小豆蔻的辛香，宛如沉睡的大地苏醒时，从泥土中散发出的活力气息。当摇摆的绿意与云杉的木质香调交织在一起，仿佛晨雾',25)
				    console.log(txtxtArr,'txtxtArr')
					txtxtArr?.forEach((item,index)=>{ 
						let hd = 310 + Number(index*16)
					   this.canvas.fillText(item, rpxToPx(28 * canvasMultiple), rpxToPx(hd * canvasMultiple))
				    })  
	              // 成功之后
			 
			       this.canvas.draw(true, () => { 
			         setTimeout(() => { 
			           // 讲canvas转换成图片 
			           uni.canvasToTempFilePath({ 
			             x: 0,  
			             y: 0, 
			             canvasId: 'canvas', 
			             fileType: 'png', 
			             quality: 1, 
			             success: (success) => { 
			               console.log('success', success.tempFilePath) 
			               this.posterImage = success.tempFilePath 
			               uni.hideLoading() 
			               // this.canvas.draw() 
			             }, 
			 
			             fail: (e) => {
			 
			               uni.showToast({
			 
			                 title: '海报生成失败',
			 
			                 icon: 'none' 
			               }) 
			 
			               console.log('eeee', e)
			 
			             }
			 
			           }, this)
			 
			         }, 500)
			 
			       })
			 
			     }, 
			     // rpx转px 
			     rpxToPx(rpx) { 
			       return (rpx / 750) * wx.getSystemInfoSync().windowWidth 
			     }, 
			     // 下载图片 
			     urlToFile(url) { 
			       return new Promise((resolve) => {
			 
			         uni.getImageInfo({
			 
			           src: url,
			 
			           success(res) {
			 
			             resolve(res.path)
			 
			           },
			 
			           fail(res) {
			 
			             console.log('fail -> res', res)
			 
			             uni.showToast({
			 
			               title: '网络异常',
			 
			               duration: 2000,
			 
			               icon: 'none'
			 
			             })
			 
			             this.$emit('close')
			 
			           }
			 
			         })
			 
			       })
			 
			     },  
			     savePoster() { 
			       console.log('savePoster', this.posterImage) 
			       uni.saveImageToPhotosAlbum({ 
			         filePath: this.posterImage, 
			         success: () => { 
			           // uni.hideLoading(); 
			           uni.showToast({ 
			             title: '保存成功', 
			             icon: 'none' 
			           }) 
			           // this.close() 
			         }, 
			         fail: () => { 
			           uni.hideLoading() 
					   uni.showToast({
					     title: '相册功能未授权，无法保存', 
					     icon: 'none' 
					   })  
			         }, 
			         complete: () => {
			 
			         }
			 
			       })
			 
			     }  
		}
	}
		
</script>

<style lang="scss" scoped>
	page{
		background-color: #151515!important;
		
	}
	:deep(.u-popup__content){
		border-radius:12rpx;
	}
	.savePop .content{
		width: 640rpx;
		// background: url(@/assets/dialoBg.png) top center no-repeat;
		background-size: 100% 20rpx; 
		border-radius:12rpx;
		.content1{
			padding: 80rpx 60rpx 60rpx 60rpx; 
			line-height: 40rpx;
		}
		.bottomPop{
			line-height: 96rpx;
			display: flex;
			border-top:1rpx solid rgb(214, 215, 217);
			.btn{
				width: 33.3%;
				text-align: center;
				line-height: 96rpx;
				color: #666;
			}
			.btn:first-child{
				border-right:1rpx solid rgb(214, 215, 217);
			}
			.btn3{
				background-color: #1f1f1f;
				color:#fff;
			}
		}
	}
	.header{
		color: #FFF;
		display: flex;
		width: 100%;
		padding: 30rpx 120rpx 0 120rpx ;
		align-items: baseline;
		justify-content: space-between;
		.title{
			font-size: 30rpx;
		}
		.checkbox{
			
		}
	}
	.search{
		margin-top: 20rpx;
		.u-border{border:1px solid #666666}
		position: relative;
		padding: 20rpx 120rpx 20rpx 120rpx;
		.icon{
			position: absolute;
			top: 30rpx;
			right: 120rpx;
		}
		.input{
			color: #FFF;
			border-bottom:1px solid #666666;
			padding: 10rpx;
			// border-radius: 10rpx;
		}
		.input-placeholder{
			color: #666666;
		}
		.result{
			width: 100%;
			
			position: absolute;
			
			z-index: 1000;
			left: 0;
			padding: 20rpx;
			.container{
					box-sizing: border-box;
					height: 400rpx;
					background-color: #000;
					padding: 10rpx;
					.item{
						padding: 20rpx;
						display: flex;
						justify-content: space-between;
						border-bottom: 1px solid #666666;
						.name{
							color: #FFF;
						}
						.code{
							color: #c49c4c;
						}
					}
			}
			
		}
	}
	.stop{
		color: #FFFFFF;
		text-align: center;
	}
	.slider{
		margin-top: 20rpx;
		padding: 0 ;
		.btn{
			margin-top: 40rpx;
		}
	}
	.top-swiper{
		margin:35rpx 0  30rpx 0; 
		width: 100%;
		height: 100%;
		// overflow-x: hidden;
		-webkit-text-size-adjust: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		padding-bottom:150px;
		
		.bg{
			padding-top: var(--status-bar-height);
			box-sizing: content-box;
			width: 100%;
			position: relative;
			
			.placeholder{
				box-sizing: content-box;
				padding-top: 600rpx;
				height: 44px;
			}
			
			.image{
				box-sizing: content-box;
				position: absolute;
				z-index: 1;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				overflow: hidden;
				
				&::after{
					content: '';
					position: absolute;
					width: 100%;
					height: 100%;
					z-index: 1;
					bottom: 0;
					left: 0;
					height: 65%;
				
				}
				
				> image{
					position: absolute;
					box-sizing: content-box;
					padding: 60px;
					top: 0;
					left: 0;
					width: 100%;
					height: 80%;
					top: -60px;
					left: -60px;
					filter: blur(50px);
				}
			}
		}
		
		.box{
			padding-top: var(--status-bar-height);
			box-sizing: content-box;
			width: 100%;
			height: auto;
			position: relative;
			// padding-bottom:100rpx;
		}
		
		.swiper {
			height: 820rpx;
			margin: 0rpx;
			padding-bottom: 20rpx;
			overflow: visible!important;
			.le-img {
				// overflow: hidden;
				// background: url(@/assets/dialogBg.png);
				background-size: 100% 100%;
				border-radius: 0!important;
				background-color:transparent!important;
				.current{
					position: absolute;
					right: 20rpx;
					top: 20rpx;
				}
				.new{
					position: absolute;
					background-color: rgb(170, 0, 0);
					left: -28rpx;
					top:20rpx;
					width:150rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					font-size: 30rpx;
					font-weight: bold;
					color: #FFF;
					// padding:60rpx 20rpx 20rpx 20rpx;
					 transform: rotate(-35deg); 
				}
				.saveHasMaske{
					position: absolute;
					background-color: rgb(170, 0, 0);
					left: -30rpx;
					top:15rpx;
					width:240rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					font-size: 30rpx; 
					color: #FFF;
					// padding:60rpx 20rpx 20rpx 20rpx;
					 transform: rotate(-15deg); 
				}
				.saveNoMaske{
					width:280rpx;
					font-size: 26rpx; 
					background-color: #888;
				}
				.name{
					font-size: 40rpx; font-weight: bold;
					text-align: center;
					 padding: 135rpx 0 10rpx 0;
					 display: flex;
					}
				.name1{
					font-size: 40rpx; font-weight: bold;
					text-align: center;
					
					 padding: 135rpx 0 10rpx 0;
					  display: flex;
					}
				.name2{
					font-size: 40rpx; font-weight: bold;
					text-align: center;
					
					 padding: 135rpx 0 10rpx 0;
	
					}
				.code{
					font-size: 18rpx;
					background-color: #000;
					border-radius: 50rpx;
					color: #FFF;
					padding: 10rpx 10rpx;
					text-align: center;
					margin: 0 auto;
					margin:0 36rpx;
					
				}
				#scroll_intro{
					line-height: 36rpx;
					display: flex; 
					align-items: first baseline;
					
				}
				.scroll-intro{
					font-size: 18rpx;
					line-height: 36rpx;
					height: 280rpx; 
					margin-top: 20rpx;
					display: flex;
					
				}
				.intro{
					font-size: 21rpx;
					overflow-y: auto; 
					line-height: 36rpx;
					height: 280rpx; 
					margin-top: 0rpx;
					padding-bottom: 40rpx;
					box-sizing: border-box;
					padding: 0rpx 18rpx;
				}
				.reload-intro{
					margin-top: 20rpx;
					left:60rpx;
					position: absolute;
				}
				.nickname{
					display: flex;
					justify-content: space-between;
					font-size: 26rpx;
					
					
					.left{
						flex: 1;
					}
					.right{
						display: flex;
						align-items: center;
						justify-content:flex-end;
						.username{
							padding:30rpx 0;
							font-size: 22rpx;
						}
					}
				}
				.bottom{
					justify-content: space-between;
					display: flex;
					align-items: center;
					.left{
						flex: 1;
						.line{
							height: 2px;
							background-color: #000;
						}
					}
					.right{
						margin-left: 20rpx;
						display: flex;
						font-size: 22rpx;
						align-items: center;
					}
				}
				width: 100%;
				height: 100%;
				display: block;
				transform: scale(0.9);
				background-color: #FFF;
				transition: transform 0.3s ease-in-out 0s;
				border-radius: 30rpx;
				padding: 0rpx 60rpx;
				&.le-active {
					transform: scale(1);
				}
			}
		
		}
	}
	.pg_bottom{
		color: #FFF;
		font-size: 22rpx;
		padding: 0 30 rpx;
		margin: 20rpx auto 30rpx auto;
		position: relative;
		.search_back{
			position: absolute;
			width: 100%;
			
			text-align: center;
			top: -180rpx;
			z-index: 100;
			.btns{margin: 0 auto;
			border-radius: 10rpx;
				background-color: #37383c;
				width: 200rpx;
				padding: 20rpx;
				margin: 0 auto;
			}
		}
		.checkbox{
			width: 550rpx;
			display: flex;
			align-items: center;
			margin: 0 auto;
			// opacity: 0.8;
			color: #999;
			// justify-content:center
			padding-left:60rpx
		}
		.btn{ 
			background-color: #37383c;
			padding: 20rpx;
			border-radius: 10rpx;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			text-align: center;
			align-items: center;
			
			.tips{
				width: 100%;
				font-size: 20rpx;
				margin-top: 20rpx;
				color: #ddd;
			}
			.sure{
				width: 100%;
				font-size: 30rpx;
				font-weight: bold;
			}
		}
		.btn1{
			margin: 30rpx 0rpx;
			padding: 30rpx 0;
		}
	}
	.overlay-warp{
		width: 80%;
		margin: 500rpx auto;
		.tip{
			color: #FFF;
			text-align: center;
			margin-bottom: 20rpx;
			font-size: 25rpx;
			line-height: 35rpx;
		}
		.status{
			color: #FFF;
			text-align: center;
			margin-bottom: 20rpx;
			font-size: 40rpx;
		}
	}
	.progress-warp{
	
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		flex-direction: row;
		height: 100%;
		.status{width: 100%;}
	}
	.success{
		
		background-color: #000;
		padding: 30rpx;
		border-radius: 20rpx;
		.title{
			color: #fff;
			font-size: 32rpx;
			line-height: 1.5;
			margin-top: 40rpx;
		
		}
		.code{
				color: #c49c4c;
				font-size: 40rpx;
				text-align: center;
				margin: 20rpx 0;
		}
		.haxi2{
			font-size: 26rpx;
			color: #fff;
			margin-bottom: 40rpx;
			line-height: 1.8;
			text{
				color: #c49c4c;
			}
			
		}
		.text_white{
			color: #fff;
			font-size: 40rpx;
			text-align: center;
		}
		.haxi1{
			color: #fff;
			
			margin-bottom: 50rpx;
			.t1{
				font-size: 60rpx;
				margin-bottom: 20rpx;
			}
			.status{
				margin-top: 50rpx;
				font-size: 30rpx;
				color: #c49c4c;
				
			}
		}
		.haxi3{
			background-color: #37383c;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 28rpx;
			border-radius: 10rpx;
			margin: 0 auto;
			padding: 30rpx;
		}
	}
	.reload{
		display: flex;
		color: #FFF;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		text-align: center;
		margin: 0 auto;
		width: 200rpx;
		padding: 0 0 20rpx 0rpx;
	}
	.btBottom{
		position: fixed;
		left: 0;
		bottom: -10px;
		z-index: 99; 
		background-color: rgb(63, 64, 68);
		margin: 30rpx 30rpx 50rpx 30rpx;
		box-sizing: border-box;
		background-color: #37383c;
		padding: 20rpx;
		border-radius: 10rpx;
		width:calc(100% - 60rpx);
		text-align: center;
		.tips{
			width: 100%;
			font-size: 20rpx;
			margin-top: 20rpx;
			color: #ddd;
		}
		.sure{
			width: 100%;
			font-size: 30rpx;
			font-weight: bold;
		}
	}
	.flex{
		display: flex;
	}
	.dotTop{
		width: 8px;
		height: 8px;
		background-color: #000;
		transform: rotate(45deg);
		margin: 60rpx auto 0  auto;
	}
	
	
	 .indicator { 
		 position: absolute;
		 bottom: -400px; /* 根据需要调整位置 */
		 left: 50%;
		 transform: translateX(-50%);
		 display: flex;
		 align-items: center;
		 z-index: -1;
		 
		 padding: 30px 0;
	        @include flex(row);
	        justify-content: center;
	
	        &__dot {
	             height: 6px;
	             width: 6px;
	             border-radius: 100px;
	             background-color: rgba(255, 255, 255, 0.35);
	             margin: 2px 5px;
	             transition: background-color 0.3s;
	    
	            &--active {
					height: 10px;
					width: 10px;
					margin: 0px 5px;
	                background-color: #ffffff;
	             }
	        }
	    } 
		
	 .indicator-num {
			padding: 2px 0;
			background-color: rgba(0, 0, 0, 0.35);
			border-radius: 100px;
			width: 35px;
			@include flex;
			justify-content: center;
	
			&__text {
				 color: #FFFFFF;
				 font-size: 12px;
			 }
		}
		
		.uni-swiper-wrapper{
			overflow: auto;
		}
	:deep(.uni-swiper-wrapper){
		overflow: visible!important; 
	}	
	.itemSwpier{
		overflow: visible!important; 
		opacity:0.4;
		padding-top: 20rpx;
	}
	.itemSwpierCur{
		opacity:1;
	} 
	.swiper-item-content {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  height: 100%;
	}
	.indicator-swiper {
	  height: 150rpx;
	  position: absolute;
	  bottom: -50rpx;
	  left: 0rpx;
	  width: 100%;
	  width: calc(100%);
	  // margin: 0 50rpx;
	  box-sizing: border-box;
	  overflow: hidden;
	}
	.indicator-group {
	  display: flex;
	  align-items: center;
	  justify-content:space-around;
	}
	.indicator-dot {
	  width: 28rpx;
	  height: 28rpx;
	  border-radius: 50%;
	  background-color: #fff;
	  margin: 0 1rpx;
	  transition: transform 0.3s, background-color 0.3s;
	}
	.indicator-dot.active {
	  // background-color: green; 
	  transform: scale(0.2);
	  opacity: 0.2;
	}
	.indicator-dot.active1 { 
	  transform: scale(0.3);
	  opacity: 0.3;
	}
	
	.indicator-dot.active2 { 
	  transform: scale(0.4);
	  opacity: 0.4;
	}
	
	.indicator-dot.active3 { 
	  transform: scale(0.45);
	  opacity: 0.45;
	}
	.indicator-dot.active4 {
	  transform: scale(0.5);
	  opacity: 0.5;
	}
	.indicator-dot.active5 {
	  transform: scale(0.55);
	  opacity: 0.55;
	}
	.indicator-dot.active6 {
	  transform: scale(0.6);
	  opacity: 0.6;
	}
	.indicator-dot.active7 {
	  transform: scale(0.65);
	  opacity: 0.65;
	}
	.indicator-dot.active8 {
	  transform: scale(0.7);
	   opacity: 0.7;
	   
	}
	.indicator-dot.active9 {
	  transform: scale(0.8);
	   opacity: 0.8;
	} 
	.indicator-dot.active10 {
	  transform: scale(0.9);
	  opacity: 0.9;
	}
	.indicator-dot.active11 { 
		transform: scale(1); 
		background-color: #fff;
	 }
   .indicator-dot1{
	   transform: scale(0.1); 
   }
	
	.scroll-view {
	  white-space: nowrap;
	  width: 100%;
	}
	
	.dialogBox{ 
		min-height: 300rpx;
		margin:0 40rpx;  
		position: relative;
		.saveHasMaske{
			position: absolute;
			background-color: rgb(170, 0, 0);
			left: -30rpx;
			top:15rpx;
			width:440rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			font-size: 30rpx; 
			color: #FFF; 
			transform: rotate(-15deg); 
		}
		.headerTop{
			position: absolute;
			top:20px;
			right: 0%;
			// width: 95%;
			z-index: 9999; 
			text-align: right;
			.saveHasMaske{
				left: -40rpx;
				top:5rpx;
			}
		}
		
		.logoh{
			width: 213rpx;
			height: 168rpx;
			margin: 0 auto;
			display: block;
			padding-bottom: 30rpx;
		}
		.dialogBoxCon{
			// background: url(@/assets/dialogBg.png);
			background-size: 100% 100%;
			padding: 50rpx 50rpx 50rpx 50rpx; 
			position: relative;
			.til_code{
				width: 100%;
				height: 80rpx;
				background-color: #000;
				color:#fff;
				line-height: 80rpx;
				font-size: 46rpx;
				text-align: center;
				
			}
			.info1,.info2{
				padding: 30rpx 0;
				border-bottom: 1px solid #000;
				margin-bottom: 30rpx;
				line-height: 50rpx;
				font-size: 30rpx;
				// font-weight: bold;
				color: #000;
				position: relative;
			}
			.codeImg{
				position: absolute;
				right:20rpx;
				top:40rpx;				
				image{
					width: 120rpx;
					height: 120rpx;
				}
			}
			.info2{
				font-size: 24rpx;
				line-height: 46rpx;
				padding: 0rpx 0 20rpx 0;
				border-bottom: none;
			}
			.info2 h2{
				text-align: center;
			}
			.haxi3{
				// background: url(../../assets/dialog_bt.png) no-repeat;
				background-size: 100% 86rpx;
				color: #fff;
				font-size: 36rpx;
				line-height: 86rpx;
				text-align: center;
				font-weight: bold;
			} 
			 
		}
		.close{
			text-align: right;
			position: absolute;
			right:40rpx;
			top:30rpx;
			.btnClose{
				width: 47rpx;
				height: 47rpx;
				margin-right: -20rpx;
			}
		}

	}
	
	.rgClose{
		position: absolute;
		right: 30rpx;
		top:30rpx;
	}
	
	.codeBox{
		position: relative;
		.reload{
			position: absolute;
			right: -100rpx;
			top:0rpx;
		}
	}
	.resetBtn{
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size:26rpx;
		padding-top:40rpx;
	}
	
	.dotSwiper{
		width: 4.75%!important; 
		height: 50rpx!important; 
	}

	
	.shareBox{
		margin: 0 auto; 
		width: 720rpx; 
		.headerTop{
			position: relative;
			.close{
				position: absolute;
				top:-15rpx;
				right:60rpx;
			}
		}
		.shareBtn{
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			color: #fff;
			background-color: #37383c; 
			text-align: center;
			border-radius: 10rpx;
			margin-top: 20rpx;
		}
	}
	.poster-canvas{ 
		// display: flex;
		// justify-content: center; /* 水平居中 */
		// align-items: center; /* 垂直居中 */
		// height: 100vh; /* 使用视口高度 */ 
		margin: 0 auto; 
		position: relative; 
		width: 750rpx;
		#canvas{
		  width: 750rpx; 
		  // position: absolute;
		  // left:calc(50% - 375rpx);
		  // top:200rpx; 
		}
	}
	.fixedBottomBox{
		position: fixed;
		bottom: 30px;
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
	 
	}
	 
 
</style>
<style>
	page{
		 background-color: #151515!important;
		 min-height: 100vh;
	}
</style>
